.component {
  cursor: default;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--full-padding-lg);
  background-color: var(--white-accent-clr);
  transition: box-shadow 0.3ms ease-in-out;

  // border: 1px solid var(--primary-border-subtle);
  &:hover {
    box-shadow: var(--shadow-hover);
  }
}

.shadow {
  box-shadow: var(--shadow-sm);
}

.cursor {
  cursor: pointer;
}

.without-hover {
  &:hover {
    box-shadow: var(--shadow-sm);
  }
}

.radius-main {
  border-radius: var(--radius-md);
}

.radius-medium {
  border-radius: var(--radius-lg);
}

.radius-small {
  border-radius: var(--radius-xs);
}

.danger {
  background-color: var(--error-surface-subtle);
}

.positive {
  background-color: var(--success-surface-subtle);
}

.white {
  background-color: var(--white-accent-clr);
}

.yellow {
  background-color: var(--warning-surface-subtle);
}
